@charset "utf-8";
@component-namespace app-service-center-content {
  @b monitor {
    @e top {
      width: var(--app-service-center-content-module-for-monitor-top-width);
      height: var(--app-service-center-content-module-for-monitor-top-height);
      @e title-wrapper {
        width: var(--app-service-center-content-module-for-monitor-top-title-wrapper-width);
        height: var(--app-service-center-content-module-for-monitor-top-title-wrapper-height);
        line-height: @height;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        @e title {
          width: var(--app-service-center-content-module-for-monitor-top-title-wrapper-title-width);
          height: var(--app-service-center-content-module-for-monitor-top-title-wrapper-title-height);
          font-size: var(--app-service-center-content-module-for-monitor-top-title-wrapper-title-font-size);
          font-weight: var(--app-service-center-content-module-for-monitor-top-title-wrapper-title-font-weight);
          line-height: 1.2;
          text-align: left;
        }
      }
    }
    @e center {
      width: var(--app-service-center-content-module-for-monitor-center-width);
      height: var(--app-service-center-content-module-for-monitor-center-height);
      position: relative;
      @e goal {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 95%;
        @e today {
          position: relative;
          width: 100%;
          height: 40%;
          margin-bottom: 0.8rem;
          border: var(--border-normal);
          border-radius: var(--border-radius-large);
          display: flex;
          justify-content: center;
          align-items: center;
          @e left-part {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            @e part-1 {
              width: 38%;
              height: 100%;
              border-left: 0.05rem dashed var(--color-extra-light-silver);
              display: flex;
              justify-content: center;
              align-items: center;
              @e info {
                width: 45%;
                height: 100%;
                padding: 0.5rem;
                @e title {
                  width: 100%;
                  height: 25%;
                  text-align: left;
                  font-size: var(--assist-font-size-small);
                  font-weight: bold;
                }
                @e todo {
                  width: 100%;
                  height: 25%;
                  margin-bottom: 0.35rem;
                  text-align: left;
                  font-size: var(--assist-font-size-mini);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                }
                @e done {
                  width: 100%;
                  height: 25%;
                  text-align: left;
                  font-size: var(--assist-font-size-mini);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                }
              }
              @e circle-progress {
                width: 55%;
                height: 100%;
                padding: 0.5rem;
              }
            }
            @e part-2 {
              width: 38%;
              height: 100%;
              border-left: 0.05rem dashed var(--color-extra-light-silver);
              display: flex;
              justify-content: center;
              align-items: center;
              @e info {
                width: 45%;
                height: 100%;
                padding: 0.5rem;
                @e title {
                  width: 100%;
                  height: 25%;
                  padding-left: 0.2rem;
                  text-align: left;
                  font-size: var(--assist-font-size-small);
                  font-weight: bold;
                }
                @e todo {
                  width: 100%;
                  height: 25%;
                  padding-left: 0.2rem;
                  margin-bottom: 0.35rem;
                  text-align: left;
                  font-size: var(--assist-font-size-mini);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                }
                @e done {
                  width: 100%;
                  height: 25%;
                  padding-left: 0.2rem;
                  text-align: left;
                  font-size: var(--assist-font-size-mini);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                }
              }
              @e circle-progress {
                width: 55%;
                height: 100%;
                padding: 0.5rem;
              }
            }
            @e part-3 {
              width: 24%;
              height: 100%;
              padding: 0.5rem;
              @e title {
                width: 100%;
                height: 15%;
                font-size: var(--assist-font-size-small);
                font-weight: bold;
                text-align: left;
              }
              @e step {
                width: 100%;
                height: 60%;
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
                text-align: left;
                font-size: var(--assist-font-size-mini);
                line-height: 1.5;
              }
              @e setTarget {
                width: 100%;
                height: 25%;
              }
            }
          }
        }
        @e mtopic {
          width: 100%;
          height: 55%;
          margin: auto;
          border: var(--border-normal);
          border-radius: var(--border-radius-large);
          display: flex;
          justify-content: center;
          align-items: center;
          @e left-part {
            width: 70%;
            height: 100%;
            flex: 1 1 auto;
            padding: 0.5rem;
            @e title {
              width: 100%;
              height: 20%;
              font-size: var(--assist-font-size-small);
              font-weight: bold;
              text-align: left;
            }
          }
          @e right-part {
            width: 30%;
            height: 100%;
            flex: 1 1 auto;
            padding: 1.0rem;
            border-left: 0.05rem dashed var(--color-extra-light-silver);
          }
        }
      }
      @e tomato,
      env {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 97.5%;
        height: 97.5%;
        display: flex;
        align-items: center;
        justify-content: center;
        @e left-part {
          flex: 0 0 auto;
          width: 50%;
          height: 100%;
          @e top-part {
            width: 100%;
            height: 50%;
          }
          @e bottom-part {
            width: 100%;
            height: 50%;
          }
        }
        @e right-part {
          position: relative;
          flex: 0 0 auto;
          width: 50%;
          height: 100%;
          @e top-part {
            width: 100%;
            height: 50%;
          }
          @e bottom-part {
            position: absolute;
            top: 55%;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 85%;
            height: 45%;
          }
        }
      }
    }
    @e bottom {
      width: var(--app-service-center-content-module-for-monitor-bottom-width);
      height: var(--app-service-center-content-module-for-monitor-bottom-height);
      @e btn-wrapper {
        width: var(--app-service-center-content-module-for-monitor-bottom-btn-wrapper-width);
        height: var(--app-service-center-content-module-for-monitor-bottom-btn-wrapper-height);
        line-height: @height;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    }
  }
}